<template>
  <n-config-provider 
    :locale="locale" 
    :date-locale="dateLocale"
    :theme="naiveTheme"
    :theme-overrides="themeOverrides"
  >
    <n-global-style />
    <n-message-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <app-content />
        </n-notification-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/store'
import { useTheme } from '@/composables/useTheme'
import AppContent from './AppContent.vue'
import { 
  NConfigProvider, 
  NMessageProvider, 
  NDialogProvider, 
  NNotificationProvider,
  NGlobalStyle,
  zhCN,
  enUS,
  dateZhCN,
  dateEnUS
} from 'naive-ui'

const appStore = useAppStore()
const { naiveTheme, themeOverrides } = useTheme()

const locale = computed(() => {
  return appStore.locale === 'zh' ? zhCN : enUS
})

const dateLocale = computed(() => {
  return appStore.locale === 'zh' ? dateZhCN : dateEnUS
})
</script>
